<template>
	<view class="content">
		<view class="nav-part-bg"></view>
		<view class="body">
			<view class="nav-day">
				<!-- <selectDay :outDate="selDay" @selectDay="updateDay"></selectDay> -->
				<view class="search" @click="selectCar">
					<u-search @input="checkCar" placeholder="请选择车辆" :showAction="false" :clearabled="true" shape="square" v-model="plateNumber"></u-search>
				</view>
				<view class="statstic">
					<view class="cell">
						<text class="cell-top">运送旅客</text>
						<u-count-to color="white" :startVal="0" :endVal="peopleSum"></u-count-to>
					</view>
					<view class="cell">
						<text class="cell-top">线路趟次</text>
						<u-count-to color="white" :startVal="0" :endVal="taskSum"></u-count-to>
					</view>
				</view>
			</view>
			<view class="footer" v-if="byList.length">
				<view v-for="(item, index) in byList" :key="index">
					<view
						v-if="citem == 1 ? item.checkOutTime : item.checkOutTime"
						class="foot-cell"
						@click="citem == 1 ? countSign(item.id) : checkSign(item.id)"
						v-for="(citem, cindex) in [1]"
						:key="cindex"
					>
						<view class="step-spot">
							<view class="foot-head">
								<text>{{ item.plateNumber + '【' + item.vehicleId + '】' }}</text>
							</view>
							<view class="foot-tip">
								<view class="row-tip">
									<view class="cell">
										<view class="cell-row-right">
											<text class="cell-title">线路：</text>
											<text class="cell-content">{{ item.lineName }}</text>
										</view>
									</view>
									<view class="cell">
										<view class="cell-row-left">
											<text class="cell-title">站点：</text>
											<text class="cell-content">{{ item.stationName }}</text>
										</view>
										<view class="cell-row-right">
											<text class="cell-title">人数：</text>
											<text class="cell-content">{{ item.checkOutCnt }}</text>
										</view>
									</view>
									<view class="cell">
										<text class="cell-title">时间：</text>
										<text class="cell-content2">{{ item.checkOutTime }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty class="footer" v-else text="暂无数据"></empty>
		</view>
	</view>
</template>

<script>
import selectDay from '@/components/selectDay.vue';
import bycarjs from '@/api/bycar.js';
import common from '@/utils/common.js';
import empty from '@/components/empty.vue';
import { mapGetters } from 'vuex';
export default {
	components: { selectDay, empty },
	computed: { ...mapGetters(['token']) },
	onLoad() {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
	},
	data() {
		return {
			peopleSum: 0,
			taskSum: 0,
			vehicleCode: 0,
			plateNumber: '',
			byList: [],
			selDay: new Date()
		};
	},
	async onPullDownRefresh() {
		await this.initPage();
		uni.stopPullDownRefresh();
		uni.showToast({
			icon: 'none',
			title: '刷新成功',
			duration: 300
		});
	},
	methods: {
		selectCar() {
			uni.navigateTo({
				url: '/pages/carlist/carlist'
			});
		},
		async checkCar() {
			let res = await bycarjs.getByCarList(this.token, this.vehicleCode);
			if (common.httpIsWrong(res)) return;
			this.byList = res.json.data.data.stationList;
			this.taskSum = res.json.data.data.taskTotal;
			this.peopleSum = res.json.data.data.total;
		},
		countSign(id) {
			uni.navigateTo({
				url: '/pages/security/security?isView=0&id=' + id
			});
		},
		checkSign(id) {
			uni.navigateTo({
				url: '/pages/securityout/securityout?isView=0&id=' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: white;
	overflow: scroll;
	position: relative;
	.nav-part-bg {
		width: 100%;
		height: 0;
		background-color: #1a90e4;
		position: fixed;
		top: 0;
		z-index: 0;
	}
	.body {
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 220rpx;
		overflow: auto;
		.nav-day {
			width: 100%;
			height: auto;
			color: white;
			background-color: #1a90e4;
			position: fixed;
			top: var(--window-top, 0);
			z-index: 99;
			.search {
				margin: 0 20rpx;
			}
			.statstic {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 150rpx;
				background-color: #1a90e4;
				.cell {
					display: flex;
					width: 33.33%;
					height: 100%;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.cell-top {
						color: white;
						letter-spacing: 10rpx;
					}
				}
			}
		}
		.header {
			border: solid 1rpx #1a90e4;
			width: 100%;
			height: auto;
			position: fixed;
			top: var(--window-top, 0);
			z-index: 99;
			box-shadow: 0px 1px 5px #d9d9d9;
			background-color: white;
			.row {
				margin: 20rpx;
				align-items: center;
				border: solid 1rpx #3c9cff;
				border-radius: 10rpx;
				background-color: #f1f2f4;
				.line {
					width: 100%;
					position: relative;
				}
			}
		}
		.footer {
			width: 100%;
			.foot-cell {
				margin: 20rpx 20rpx;
				border-radius: 10rpx;
				background-color: white;
				box-shadow: 0px 1px 5px #888888;
				.step-spot {
					display: flex;
					flex-direction: column;
					.foot-head {
						height: 80rpx;
						display: flex;
						align-items: center;
						padding-left: 30rpx;
					}
					.foot-tip {
						padding: 10rpx 30rpx;
						background-color: #e8f2fe;
						border-radius: 0 0 10rpx 10rpx;
						.row-tip {
							display: flex;
							flex-direction: column;
							.tip-m {
								color: #3c9cff;
							}
							.cell {
								padding: 10rpx 0;
								display: flex;
								.cell-title {
									letter-spacing: 10rpx;
									font-size: 28rpx;
								}
								.cell-content {
									letter-spacing: 10rpx;
									font-size: 28rpx;
									color: #1a90e4;
									margin: 0 20rpx;
								}
								.cell-content2 {
									font-size: 28rpx;
									color: #1a90e4;
									margin: 0 20rpx;
									letter-spacing: 3rpx;
								}
								.cell-row-left {
									width: 50%;
								}
								.cell-row-right {
									flex: 1;
								}
								.cell-row {
									width: 50%;
								}
							}
						}
					}
					.collapse {
						width: 100%;
					}
					.step {
						display: flex;
						flex-direction: column;
						.cellbody {
							padding: 10rpx 0;
							display: flex;
							.cellbody-title {
								letter-spacing: 4rpx;
								font-size: 28rpx;
							}
							.cellbody-content {
								font-size: 28rpx;
								letter-spacing: 4rpx;
								color: #1a90e4;
								margin: 0 20rpx;
							}
							.cellbody-content2 {
								font-size: 28rpx;
								letter-spacing: 4rpx;
								color: #1a90e4;
								margin: 0 20rpx;
							}
							.cellbody-row-left {
								width: 50%;
							}
							.cellbody-row-right {
								flex: 1;
							}
							.cellbody-row {
								width: 50%;
							}
						}
					}
				}
			}
		}
	}
}
::v-deep .u-steps.u-steps--column {
	width: 100%;
}
</style>
